<template>
  <div class="retrieve">
    <el-container>
      <el-header class="header" style="height: 100px">
        <img :src="logo" class="logo"  >
        <div class="logo-title">注册用户</div>
      </el-header>
      <el-main>
        <div class="steps">
          <el-steps :active="active" :space="1000" finish-status="success" align-center>
            <el-step title="身份信息"></el-step>
            <el-step title="设置密码"></el-step>
            <el-step title="重置完成"></el-step>
          </el-steps>
          <div class="info" v-show="active===0">
            <div class="head">身份信息</div>
            <el-form :label-position="labelPosition" label-width="100px" ref="form" :model="form" :rules="Rule">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="姓名:" prop="real_name" >
                    <el-input v-model="form.real_name" placeholder="请输入用户姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别:" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择性别" :clearable=true style="width:100%">
                      <el-option label="男" value="0"></el-option>
                      <el-option label="女" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证号:" prop="id_card" >
                    <el-input v-model="form.id_card" placeholder="请输入身份证号" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出生日期:" prop="birth">
                    <el-date-picker v-model="form.birth" style="width:100%" type="date" placeholder="请选择入住时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="手机号:" prop="tel" >
                    <el-input v-model="form.tel" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="职位:" prop="position" >
                    <el-input v-model="form.position" placeholder="请输入用户职位"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="角色:" prop="rule_id">
                    <el-select v-model="form.rule_id" placeholder="请选择用户角色" style="width: 100%">
                      <el-option label="管理员" value="2"></el-option>
                      <el-option label="普通用户" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮箱:" prop="email" >
                    <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公寓名称:" prop="apt_name">
                    <el-select style="width: 100%" v-model="form.apt_id" placeholder="请选择"
                               @change = "roomToApt($event)">
                      <el-option
                          v-for="item in apartment"
                          :key="item.aptId"
                          :label="item.aptName"
                          :value="item.aptId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="房间编号:" prop="room_id">
                    <el-select style="width: 100%" v-model="form.room_id">
                      <el-option
                          v-for="item in rooms"
                          :key="item.id"
                          :label="item.rid"
                          :value="item.rid">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="入住时间:" prop="in_time">
                    <el-date-picker v-model="form.in_time" style="width:100%" type="date" placeholder="请选择入住时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="info" v-show="active===1">
            <div class="head">设置密码</div>
            <el-form :label-position="labelPosition" label-width="100px"  :model="form1" ref="form1" :rules="Rule1">
                  <el-form-item label="用户名:"  prop="username">
                    <el-input v-model="form1.username" ></el-input>
                  </el-form-item>
                  <el-form-item label="密码:" prop="Password">
                    <el-input v-model="form1.password" type="password"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码:" prop="rePassword">
                    <el-input v-model="form1.rePassword" type="password"></el-input>
                  </el-form-item>
            </el-form>
          </div>
          <div class="suc" v-show="active===2">
            <img :src="suclogo" class="suclogo"  >
            <h3>注册成功！</h3>
            <h2> 请点击“提交”回到登录界面</h2>
          </div>
          <el-button style="margin-top: 12px;" @click="before" v-if="active==2||active==1" class="button">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next" v-if="active==0||active==1" class="button">下一步</el-button>
          <el-button v-if="active==2" class="button" @click="success()">提交</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import {request} from "./utils/request";

export default {
  name: "retrieve",
  data(){
    const telValidate = (rule, value, callback) => {
      const reg = /^1[3|4|5|8][0-9]\d{4,8}$/
      if (!value) {
        callback(new Error('请输入手机号'))
      }  else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const emailValidate = (rule, value, callback) => {
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }
    const idValidate = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的身份证号'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form1.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      form:{
        real_name:'',
        sex:'',
        birth:'',
        tel:'',
        id_card:'',
        position:'',
        apt_name:'',
        room_id:'',
        in_time:'',
        email:'',
        rule_id:'',
      },
      form1:{
        username:'',
        password:'',
        rePassword:''
      },
      Rule:{
        real_name:[{required:false,message: '请输入姓名',trigger: 'blur'}],
        room_id:[{required:false,message: '请输入房间编号',trigger: 'blur'}],
        sex:[{required:false,message: '请输入性别',trigger: 'blur'}],
        birth:[{required:false,message: '请输入年龄',trigger: 'blur'}],
        tel:[{required:false,validator: telValidate,trigger: 'blur'}],
        id_card:[{required:true,validator: idValidate,trigger: 'blur'}],
        position:[{required:false,message: '请输入职位',trigger: 'blur'}],
        apt_name:[{required:false,message: '请输入公寓号',trigger: 'blur'}],
        in_time:[{required:false,message: '请选择入住时间',trigger: 'blur'}],
        email:[{required:true,validator: emailValidate,trigger: 'blur'}],
        rule_id:[{required:false,message: '请选择角色身份',trigger: 'blur'}],
      },
      Rule1:{
        username:[{required:true,message: '请输入用户名',trigger: 'blur'}],
        password:[{required:true,message: '请输入密码',trigger: 'blur'}],
        rePassword:[{required:true,validator: validatePass2,trigger: 'blur'}],
      },
      logo:require('../assets/images/logo.jpg'),
      suclogo:require('../assets/images/login-hi.jpg'),
      active:0,
      labelPosition:'right',
      titleFormValid:'',
      customFormValid:'',
      apartment: [],
      rooms: []
    }
  },
  created() {
    this.getApartmentMessage()
  },
  methods:{
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    before() {
      if (this.active-- < 0) this.active = 0;
    },
    //查询公寓的信息
    getApartmentMessage() {
      request({
        url: '/apartment/selectApartment',
        data: {},
        method: 'post'
      }).then(res => {
        this.apartment = res.data.data
      })
    },
    async roomToApt(event) {
      console.log(event)
      const {data: res} = await this.$http.get('/room/getRoomsByAptId', {
        params: {
          apt_id: event,
          status: 1
        }})
      this.form.room_id = ''

      //保存对应公寓的名称
      this.apartment.forEach(e => {
        if(event === e.aptId) {
          this.form.apt_name = e.aptName
        }
      })

      this.rooms = res.data
    },
    success(){
      this.$refs.form.validate(async valid=>{
        if(valid){
          this.titleFormValid = true
        }
      })
      this.$refs.form1.validate(async valid=>{
        if(valid){
          this.customFormValid  = true
          if (this.titleFormValid && this.customFormValid) {
            let params = {
              real_name: this.form.real_name,
              sex: this.form.sex,
              birth: this.form.birth,
              tel: this.form.tel,
              id_card: this.form.id_card,
              position: this.form.position,
              apt_id: this.form.apt_id,
              apt_name: this.form.apt_name,
              room_id: this.form.room_id,
              in_time: this.form.in_time,
              email: this.form.email,
              rule_id: this.form.rule_id,
              username: this.form1.username,
              password: this.form1.password,
              status: 0
            }
            console.log(params)

            const {data: res} = await this.$http.post('/user/insertUser', params)
            console.log(res)

            if(res.code === 200) {
              this.$message.success(res.message)
              //弹回到登陆界面
              this.$router.push({path:'/'})
            } else if(res.code === 400) {
              this.$message.error(res.message)
              this.$router.push({path:'/register'})
            }
          }
        }
      })

        // console.log(res)
        // window.location.href="/login";
      }
    }
}
</script>

<style scoped>
.logo{
  width: 100px;
  height: 100px;
  float: left;
  margin-top: 5px;
  line-height: 99em;
  overflow: hidden;
}
.suclogo{
  width: 130px;
  height: 130px;
  float: left;
}
.logo-title{
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  color: #333;
  margin-top: 34px;
  margin-left: 20px;
}
.header{
  box-shadow: 0px 8px 5px  rgba(100,100,100,0.05);
  /*rgba(255,252,153,0.5);*/
  /*rgba(144, 238 ,144, 0.5);*/
  /*rgba(100,100,100,0.04);*/
  height: 110px;
}
.steps{
  margin-top: 30px;
  text-align: center;
}
.info {
  margin: 2% auto;
  width: 1000px;
  padding: 20px;
  background-color: #f6f6f6;
  margin-bottom: 1%;
}
.el-input{
  margin-right: 50px;
}
.head{
  text-align: center;
  margin-bottom: 25px;
  margin-top: -20px;
  margin-left: -20px;
  padding-top: 10px;
  background-color: darkgray;
  width: 1040px;
  height: 35px;
}
.button{
  background-color: white;
  color: black;
}
.button:hover{
  background-color:#67c23a;
  color: black;
}
.suc{
  background-color: white;
  margin-top: 3%;
  margin-left: 30%;
  width: 600px;
  height: 200px;
  padding: 20px;
}
</style>
